@use './variables.scss' as *;
@use 'sass:color';

// 页面容器
.app-container {
  padding: $spacing-base;
  background: $bg-color;
  min-height: calc(100vh - #{$header-height});
}

// 卡片容器
.card-container {
  background: #fff;
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-base;
  padding: $spacing-base;
  margin-bottom: $spacing-base;
}

// 按钮通用样式修复
.el-button {
  &.el-button--default.is-plain,
  &.el-button--primary.is-plain,
  &.el-button--success.is-plain,
  &.el-button--info.is-plain,
  &.el-button--warning.is-plain,
  &.el-button--danger.is-plain {
    span {
      color: inherit;
      visibility: visible !important;
    }
  }
  
  // 确保文字在任何状态下都可见
  span {
    visibility: visible !important;
  }
}

// 表格工具栏
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $spacing-base;
  padding: $spacing-base;
  background: #fff;
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-base;

  .toolbar-left {
    display: flex;
    align-items: center;
    gap: $spacing-small;
  }

  .toolbar-right {
    display: flex;
    align-items: center;
    gap: $spacing-small;
  }
}

// 搜索表单
.search-form {
  background: #fff;
  padding: $spacing-base;
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-base;
  margin-bottom: $spacing-base;

  .el-form-item {
    margin-bottom: $spacing-small;
  }

  .search-buttons {
    text-align: right;
    margin-top: $spacing-base;
  }
}

// 侧边栏菜单样式修复
.el-menu--popup {
  z-index: 100 !important;
  
  // 修复下拉菜单项重叠问题
  .el-sub-menu .el-menu--popup {
    position: static !important;
    top: 0 !important;
    left: 20px !important;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }
  
  .el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow {
    transform: rotateZ(-90deg);
  }
  
  .el-menu-item {
    height: auto !important;
    min-height: 40px;
    text-decoration: none !important;
    border-bottom: none !important;
  }
}

// 核心修复 - 强制侧边栏子菜单使用合适布局
.el-menu-vertical-demo .el-sub-menu.is-opened {
  > .el-menu {
    position: static !important;
    height: auto !important;
    opacity: 1 !important;
    transform: none !important;
    padding: 0 0 0 20px;
    visibility: visible !important;
    background: transparent !important;
    border: none !important;
  }
}

// 确保展开的子菜单能够正确地撑开父容器
.el-sub-menu.is-opened {
  height: auto !important;
  padding-bottom: 8px;
  
  > .el-menu {
    display: block !important;
    margin-bottom: 4px !important;
  }
}

// 强制菜单项高度为auto，解决嵌套菜单高度问题
.el-menu {
  .el-menu-item, 
  .el-sub-menu {
    &.is-opened {
      height: auto !important;
    }
    
    // 移除下划线和底部边框
    text-decoration: none !important;
    border-bottom: none !important;
    
    a {
      text-decoration: none !important;
      border-bottom: none !important;
    }
  }
  
  .el-sub-menu__title {
    height: 46px !important;
    text-decoration: none !important;
    border-bottom: none !important;
  }
}

// 解决具有多级菜单的情况下的布局问题
.el-menu--collapse .el-sub-menu .el-menu {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  overflow: visible !important;
  
  .el-menu-item {
    height: 40px !important;
    line-height: 40px !important;
    text-decoration: none !important;
    border-bottom: none !important;
  }
}

// 处理悬浮菜单嵌套
.el-menu--popup .el-sub-menu .el-menu--popup {
  display: block;
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 15px;
}

// 移除所有菜单项的下划线
.el-menu, .el-sub-menu, .el-menu-item, .el-sub-menu__title {
  text-decoration: none !important;
  border-bottom: none !important;
  
  a, span, div {
    text-decoration: none !important;
    border-bottom: none !important;
  }
}

// 状态标签
.status-tag {
  &.success {
    color: $success-color;
    background-color: rgba($success-color, 0.1);
    border: 1px solid rgba($success-color, 0.2);
  }

  &.warning {
    color: $warning-color;
    background-color: rgba($warning-color, 0.1);
    border: 1px solid rgba($warning-color, 0.2);
  }

  &.danger {
    color: $danger-color;
    background-color: rgba($danger-color, 0.1);
    border: 1px solid rgba($danger-color, 0.2);
  }

  &.info {
    color: $info-color;
    background-color: rgba($info-color, 0.1);
    border: 1px solid rgba($info-color, 0.2);
  }
}

// 操作按钮组
.action-buttons {
  display: flex;
  gap: $spacing-small;
  align-items: center;

  .el-button {
    margin: 0;
  }
}

// 页面标题
.page-title {
  font-size: $font-size-large;
  font-weight: 600;
  color: $text-color-primary;
  margin-bottom: $spacing-base;
  padding-bottom: $spacing-small;
  border-bottom: 2px solid $primary-color;
}

// 统计卡片
.stat-card {
  background: linear-gradient(135deg, $primary-color 0%, color.adjust($primary-color, $lightness: 10%) 100%);
  color: #fff;
  padding: $spacing-large;
  border-radius: $border-radius-large;
  text-align: center;
  box-shadow: $box-shadow-light;

  .stat-number {
    font-size: $font-size-extra-large * 2;
    font-weight: bold;
    margin-bottom: $spacing-small;
  }

  .stat-label {
    font-size: $font-size-base;
    opacity: 0.9;
  }

  &.success {
    background: linear-gradient(135deg, $success-color 0%, color.adjust($success-color, $lightness: 10%) 100%);
  }

  &.warning {
    background: linear-gradient(135deg, $warning-color 0%, color.adjust($warning-color, $lightness: 10%) 100%);
  }

  &.danger {
    background: linear-gradient(135deg, $danger-color 0%, color.adjust($danger-color, $lightness: 10%) 100%);
  }
}

// 空状态
.empty-state {
  text-align: center;
  padding: $spacing-extra-large * 2;
  color: $text-color-secondary;

  .empty-icon {
    font-size: 64px;
    margin-bottom: $spacing-base;
    opacity: 0.5;
  }

  .empty-text {
    font-size: $font-size-base;
    margin-bottom: $spacing-base;
  }
}

// 加载状态
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  color: $text-color-secondary;
}

// 表格操作按钮样式
.table-operation-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px;
  justify-content: center;
  align-items: center !important;
  margin: -4px !important;
}

.table-operation-button {
  padding: 4px 10px !important;
  margin: 4px !important;
  border-radius: 4px !important;
  border: 1px solid !important;
  height: 30px !important;
  line-height: 1 !important;
  display: inline-block !important;
  min-width: 60px !important;
  text-align: center !important;
  font-weight: 500 !important;
  
  &.is-primary {
    background-color: var(--el-color-primary) !important;
    border-color: var(--el-color-primary) !important;
    color: #ffffff !important;
    &:hover {
      opacity: 0.85 !important;
    }
  }
  
  &.is-success {
    background-color: var(--el-color-success) !important;
    border-color: var(--el-color-success) !important;
    color: #ffffff !important;
    &:hover {
      opacity: 0.85 !important;
    }
  }
  
  &.is-danger {
    background-color: var(--el-color-danger) !important;
    border-color: var(--el-color-danger) !important;
    color: #ffffff !important;
    &:hover {
      opacity: 0.85 !important;
    }
  }
  
  &.is-warning {
    background-color: var(--el-color-warning) !important;
    border-color: var(--el-color-warning) !important;
    color: #ffffff !important;
    &:hover {
      opacity: 0.85 !important;
    }
  }
  
  &.is-info {
    background-color: var(--el-color-info) !important;
    border-color: var(--el-color-info) !important;
    color: #ffffff !important;
    &:hover {
      opacity: 0.85 !important;
    }
  }
}

// 工具栏按钮样式
.toolbar-button {
  padding: 8px 16px !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  min-width: 88px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  &.is-primary {
    background-color: var(--el-color-primary) !important;
    border-color: var(--el-color-primary) !important;
    color: #ffffff !important;
    &:hover {
      opacity: 0.85 !important;
    }
  }
  
  &.is-success {
    background-color: var(--el-color-success) !important;
    border-color: var(--el-color-success) !important;
    color: #ffffff !important;
    &:hover {
      opacity: 0.85 !important;
    }
  }
  
  &.is-danger {
    background-color: var(--el-color-danger) !important;
    border-color: var(--el-color-danger) !important;
    color: #ffffff !important;
    &:hover {
      opacity: 0.85 !important;
    }
  }
  
  &.is-warning {
    background-color: var(--el-color-warning) !important;
    border-color: var(--el-color-warning) !important;
    color: #ffffff !important;
    &:hover {
      opacity: 0.85 !important;
    }
  }
  
  &.is-info {
    background-color: var(--el-color-info) !important;
    border-color: var(--el-color-info) !important;
    color: #ffffff !important;
    &:hover {
      opacity: 0.85 !important;
    }
  }
}

